<template>
  <div class="container">
    <el-tabs
      v-model="activeName"
      class="tab-card tabs-white"
      type="card"
      @tab-click="handleClick"
    >
      <el-tab-pane :label="$t('插件列表')" name="first">
        <el-table :data="tableData" v-if="activeName == 'first'">
          <el-table-column prop="title" :label="$t('名称')" width="120px" />
          <el-table-column prop="name" :label="$t('标识')" />
          <el-table-column prop="description" :label="$t('描述')" />
          <el-table-column prop="author" :label="$t('作者')" />
          <el-table-column prop="version" :label="$t('版本')" />
          <el-table-column prop="status" :label="$t('状态')" width="160px">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status == 1" size="small" type="success">
                {{ $t('已启用') }}
              </el-tag>
              <el-tag
                v-else-if="scope.row.status == 2"
                size="small"
                type="info"
              >
                {{ $t('已禁用') }}
              </el-tag>
              <el-tag v-else size="small" type="info">
                {{ $t('未安装') }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            :label="$t('操作')"
            width="200px"
            fixed="right"
            align="right"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.status == 3">
                <InstallBtn
                  @click="goInstall(scope.row)"
                  v-if="scope.row.status == 3"
                />
              </span>
              <span v-else>
                <EnableBtn
                  v-if="scope.row.status == 2"
                  @click="editStatus(scope.row, 1)"
                />
                <DisableBtn
                  v-if="scope.row.status == 1"
                  @click="editStatus(scope.row, 2)"
                />
                <DelBtn
                  @success="goUninstall(scope.row)"
                  :confirm-content="$t('删除此插件的相关数据')"
                />
              </span>
            </template>
          </el-table-column>
        </el-table>
      </el-tab-pane>
      <el-tab-pane :label="$t('插件市场')" name="second">
        <div class="content" v-if="activeName == 'second'">
          <img src="@/assets/404_images/404.png" />
          <h3>{{ $t('功能正在研发中') }}</h3>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
import pluginApi from '@/api/plugin.js'
import adminApi from '@/api/admin.js'
export default {
  data() {
    return {
      activeName: 'first',
      tableData: [],
      val: {}
    }
  },
  created() {
    this.getList()
  },
  methods: {
    handleClick(tab, event) {
      if (tab.name == 'first') {
        this.getList()
      }
    },
    goInstall(row) {
      this.val.name = row.name
      pluginApi.install(this.val).then(res => {
        if (res.code == 0) {
          if (row.has_admin == 1) {
            // 有后台菜单，重新获取菜单
            this.$store.dispatch('user/generateRoutes')
          }
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    goUninstall(row) {
      this.val.name = row.name
      pluginApi.uninstall(this.val).then(res => {
        if (res.code == 0) {
          if (row.has_admin == 1) {
            // 有后台菜单，重新获取菜单
            this.$store.dispatch('user/generateRoutes')
          }
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },
    editStatus(row, status = 1) {
      pluginApi.editStatus({ name: row.name, status: status }).then(res => {
        if (res.code == 0) {
          if (row.has_admin == 1) {
            // 有后台菜单，重新获取菜单
            this.$store.dispatch('user/generateRoutes')
          }
          this.$message.success(res.msg)
          this.getList()
        }
      })
    },

    // 获取插件列表
    getList() {
      pluginApi.pluginList(this.val).then(res => {
        if (res.code === 0) {
          this.tableData = res.data
        }
      })
    }
  }
}
</script>
<style lang="scss"></style>
<style lang="scss" scoped>
.el-table {
  margin-bottom: 20px;
}
.content {
  text-align: center;
  padding: 50px 0;
  h3 {
    margin-top: 30px;
  }
}
</style>
